<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
    <script src="https://hm.baidu.com/hm.js?474b9961e6bd9de1af4310522dd0f531"></script>
    <script>
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?474b9961e6bd9de1af4310522dd0f531";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>

    <meta charset="UTF-8">
    <title>借阅记录</title>
    <link rel="stylesheet" href="../public/layui/css/layui.css" media="all">
    <style>
        .layui-table, .layui-table-view {
            margin: 0 0px;
        }
    </style>

    <link id="layuicss-layer" rel="stylesheet"
          href="https://library.mingyuefusu.top/public/layui/css/modules/layer/default/layer.css?v=3.1.1" media="all">
</head>
<body style="">
<script src="${ctx}/public/layui/layui.js" charset="utf-8"></script>
<!-- 表单 -->
<table class="layui-hide" id="history" lay-filter="formFilter"></table>
<div class="layui-form layui-border-box layui-table-view" lay-filter="LAY-table-1" lay-id="history" style=" ">
    <div class="layui-table-tool">
        <div class="layui-table-tool-temp"> 条件搜索：
            <div class="layui-inline"><select id="condition" name="condition" lay-verify="required">
                <option value=""></option>
                <option value="other">超期未还</option>
                <option value="id">ID</option>
                <option value="card_id">借阅证号</option>
                <option value="book_id">书籍ID</option>
                <option value="borrow_date">借阅日期</option>
                <option value="end_date">限制日期</option>
                <option value="return_date">返还日期</option>
                <option value="illegal">违章信息</option>
                <option value="manager_id">处理人</option>
            </select>
                <div class="layui-unselect layui-form-select">
                    <div class="layui-select-title"><input type="text" placeholder="请选择" value="" readonly=""
                                                           class="layui-input layui-unselect"><i class="layui-edge"></i>
                    </div>
                    <dl class="layui-anim layui-anim-upbit">
                        <dd lay-value="" class="layui-select-tips">请选择</dd>
                        <dd lay-value="other" class="">超期未还</dd>
                        <dd lay-value="id" class="">ID</dd>
                        <dd lay-value="card_id" class="">借阅证号</dd>
                        <dd lay-value="book_id" class="">书籍ID</dd>
                        <dd lay-value="borrow_date" class="">借阅日期</dd>
                        <dd lay-value="end_date" class="">限制日期</dd>
                        <dd lay-value="return_date" class="">返还日期</dd>
                        <dd lay-value="illegal" class="">违章信息</dd>
                        <dd lay-value="manager_id" class="">处理人</dd>
                    </dl>
                </div>
            </div>
            <div class="layui-inline"><input class="layui-input" id="conditionValue" name="conditionValue"
                                             autocomplete="off"></div>
            <button class="layui-btn" name="condition" data-type="reload" lay-event="search">搜索</button>
        </div>
        <div class="layui-table-tool-self">
            <div class="layui-inline" title="筛选列" lay-event="LAYTABLE_COLS"><i
                    class="layui-icon layui-icon-cols"></i></div>
            <div class="layui-inline" title="导出" lay-event="LAYTABLE_EXPORT"><i
                    class="layui-icon layui-icon-export"></i></div>
            <div class="layui-inline" title="打印" lay-event="LAYTABLE_PRINT"><i
                    class="layui-icon layui-icon-print"></i></div>
        </div>
    </div>




    <div class="layui-table-box">
        <div class="layui-table-header">
            <table cellspacing="0" cellpadding="0" border="0" class="layui-table">
                <thead>
                <tr>
                    <th data-field="id" data-key="1-0-0" class=" layui-unselect">
                        <div class="layui-table-cell laytable-cell-1-0-0"><span>ID</span><span
                                class="layui-table-sort layui-inline"><i class="layui-edge layui-table-sort-asc"
                                                                         title="升序"></i><i
                                class="layui-edge layui-table-sort-desc" title="降序"></i></span></div>
                    </th>
                    <th data-field="card_id" data-key="1-0-1" class="">
                        <div class="layui-table-cell laytable-cell-1-0-1"><span>借阅证号</span></div>
                    </th>
                    <th data-field="book_id" data-key="1-0-2" class=" layui-unselect">
                        <div class="layui-table-cell laytable-cell-1-0-2"><span>书籍ID</span><span
                                class="layui-table-sort layui-inline"><i class="layui-edge layui-table-sort-asc"
                                                                         title="升序"></i><i
                                class="layui-edge layui-table-sort-desc" title="降序"></i></span></div>
                    </th>
                    <th data-field="borrow_date" data-key="1-0-3" class="">
                        <div class="layui-table-cell laytable-cell-1-0-3"><span>借阅时间</span></div>
                    </th>
                    <th data-field="end_date" data-key="1-0-4" class="">
                        <div class="layui-table-cell laytable-cell-1-0-4"><span>限定时间</span></div>
                    </th>
                    <th data-field="return_date" data-key="1-0-5" class=" layui-unselect">
                        <div class="layui-table-cell laytable-cell-1-0-5"><span>归还时间</span><span
                                class="layui-table-sort layui-inline"><i class="layui-edge layui-table-sort-asc"
                                                                         title="升序"></i><i
                                class="layui-edge layui-table-sort-desc" title="降序"></i></span></div>
                    </th>
                    <th data-field="illegal" data-key="1-0-6" data-minwidth="280" class=" layui-unselect">
                        <div class="layui-table-cell laytable-cell-1-0-6"><span>违章信息</span><span
                                class="layui-table-sort layui-inline"><i class="layui-edge layui-table-sort-asc"
                                                                         title="升序"></i><i
                                class="layui-edge layui-table-sort-desc" title="降序"></i></span></div>
                    </th>
                    <th data-field="manager_id" data-key="1-0-7" class="">
                        <div class="layui-table-cell laytable-cell-1-0-7"><span>处理人</span></div>
                    </th>
                </tr>
                </thead>
            </table>
        </div>
        <div class="layui-table-body layui-table-main">
            <c:forEach items="${operatebooks}" var="operatebooks">
            <table cellspacing="0" cellpadding="0" border="0" class="layui-table">
                <tbody>
                <tr data-index="0" class="">
                    <td data-field="id" data-key="1-0-0" class="">
                        <div class="layui-table-cell laytable-cell-1-0-0">${operatebooks.userid}</div>
                    </td>
                    <td data-field="card_id" data-key="1-0-1" class="">
                        <div class="layui-table-cell laytable-cell-1-0-1">${operatebooks.bookid}</div>
                    </td>
                    <td data-field="book_id" data-key="1-0-2" class="">
                        <div class="layui-table-cell laytable-cell-1-0-2">${operatebooks.bookid}</div>
                    </td>
                    <td data-field="borrow_date" data-key="1-0-3" class="">
                        <div class="layui-table-cell laytable-cell-1-0-3">${operatebooks.borrowtime}</div>
                    </td>
                    <td data-field="end_date" data-key="1-0-4" class="">
                        <div class="layui-table-cell laytable-cell-1-0-4">${operatebooks.renttime}</div>
                    </td>
                    <td data-field="return_date" data-key="1-0-5" class="">
                        <div class="layui-table-cell laytable-cell-1-0-5"></div>
                    </td>
                    <td data-field="illegal" data-key="1-0-6" data-minwidth="280" class="">
                        <div class="layui-table-cell laytable-cell-1-0-6"></div>
                    </td>
                    <td data-field="manager_id" data-key="1-0-7" class="">
                        <div class="layui-table-cell laytable-cell-1-0-7">${operatebooks.username}</div>
                    </td>
                </tr>
<%--                <tr data-index="1" class="">--%>
<%--                    <td data-field="id" data-key="1-0-0" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-0">763</div>--%>
<%--                    </td>--%>
<%--                    <td data-field="card_id" data-key="1-0-1" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-1">1805011129</div>--%>
<%--                    </td>--%>
<%--                    <td data-field="book_id" data-key="1-0-2" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-2">203</div>--%>
<%--                    </td>--%>
<%--                    <td data-field="borrow_date" data-key="1-0-3" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-3">2023-05-19 15:14:35</div>--%>
<%--                    </td>--%>
<%--                    <td data-field="end_date" data-key="1-0-4" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-4">2023-07-08 15:14:47</div>--%>
<%--                    </td>--%>
<%--                    <td data-field="return_date" data-key="1-0-5" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-5">2023-05-19 15:14:53</div>--%>
<%--                    </td>--%>
<%--                    <td data-field="illegal" data-key="1-0-6" data-minwidth="280" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-6"></div>--%>
<%--                    </td>--%>
<%--                    <td data-field="manager_id" data-key="1-0-7" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-7">roop</div>--%>
<%--                    </td>--%>
<%--                </tr>--%>
<%--                <tr data-index="2" class="">--%>
<%--                    <td data-field="id" data-key="1-0-0" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-0">800</div>--%>
<%--                    </td>--%>
<%--                    <td data-field="card_id" data-key="1-0-1" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-1">1805011153</div>--%>
<%--                    </td>--%>
<%--                    <td data-field="book_id" data-key="1-0-2" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-2">203</div>--%>
<%--                    </td>--%>
<%--                    <td data-field="borrow_date" data-key="1-0-3" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-3">2023-05-20 14:23:02</div>--%>
<%--                    </td>--%>
<%--                    <td data-field="end_date" data-key="1-0-4" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-4">2023-07-09 14:23:24</div>--%>
<%--                    </td>--%>
<%--                    <td data-field="return_date" data-key="1-0-5" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-5">2023-05-20 14:23:30</div>--%>
<%--                    </td>--%>
<%--                    <td data-field="illegal" data-key="1-0-6" data-minwidth="280" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-6"></div>--%>
<%--                    </td>--%>
<%--                    <td data-field="manager_id" data-key="1-0-7" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-7">root</div>--%>
<%--                    </td>--%>
<%--                </tr>--%>
<%--                <tr data-index="3" class="">--%>
<%--                    <td data-field="id" data-key="1-0-0" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-0">801</div>--%>
<%--                    </td>--%>
<%--                    <td data-field="card_id" data-key="1-0-1" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-1">1805011153</div>--%>
<%--                    </td>--%>
<%--                    <td data-field="book_id" data-key="1-0-2" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-2">203</div>--%>
<%--                    </td>--%>
<%--                    <td data-field="borrow_date" data-key="1-0-3" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-3">2023-05-20 17:38:47</div>--%>
<%--                    </td>--%>
<%--                    <td data-field="end_date" data-key="1-0-4" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-4">2023-07-09 17:39:04</div>--%>
<%--                    </td>--%>
<%--                    <td data-field="return_date" data-key="1-0-5" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-5">2023-05-20 17:39:11</div>--%>
<%--                    </td>--%>
<%--                    <td data-field="illegal" data-key="1-0-6" data-minwidth="280" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-6"></div>--%>
<%--                    </td>--%>
<%--                    <td data-field="manager_id" data-key="1-0-7" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-7">root</div>--%>
<%--                    </td>--%>
<%--                </tr>--%>
<%--                <tr data-index="4" class="">--%>
<%--                    <td data-field="id" data-key="1-0-0" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-0">802</div>--%>
<%--                    </td>--%>
<%--                    <td data-field="card_id" data-key="1-0-1" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-1">1805011153</div>--%>
<%--                    </td>--%>
<%--                    <td data-field="book_id" data-key="1-0-2" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-2">203</div>--%>
<%--                    </td>--%>
<%--                    <td data-field="borrow_date" data-key="1-0-3" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-3">2023-05-20 17:52:28</div>--%>
<%--                    </td>--%>
<%--                    <td data-field="end_date" data-key="1-0-4" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-4">2023-07-09 17:52:45</div>--%>
<%--                    </td>--%>
<%--                    <td data-field="return_date" data-key="1-0-5" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-5">2023-05-20 17:52:53</div>--%>
<%--                    </td>--%>
<%--                    <td data-field="illegal" data-key="1-0-6" data-minwidth="280" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-6"></div>--%>
<%--                    </td>--%>
<%--                    <td data-field="manager_id" data-key="1-0-7" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-7">root</div>--%>
<%--                    </td>--%>
<%--                </tr>--%>
<%--                <tr data-index="5" class="">--%>
<%--                    <td data-field="id" data-key="1-0-0" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-0">803</div>--%>
<%--                    </td>--%>
<%--                    <td data-field="card_id" data-key="1-0-1" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-1">1805011153</div>--%>
<%--                    </td>--%>
<%--                    <td data-field="book_id" data-key="1-0-2" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-2">302</div>--%>
<%--                    </td>--%>
<%--                    <td data-field="borrow_date" data-key="1-0-3" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-3">2023-05-20 22:58:11</div>--%>
<%--                    </td>--%>
<%--                    <td data-field="end_date" data-key="1-0-4" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-4">2023-07-09 23:08:37</div>--%>
<%--                    </td>--%>
<%--                    <td data-field="return_date" data-key="1-0-5" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-5">2023-05-20 23:08:48</div>--%>
<%--                    </td>--%>
<%--                    <td data-field="illegal" data-key="1-0-6" data-minwidth="280" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-6"></div>--%>
<%--                    </td>--%>
<%--                    <td data-field="manager_id" data-key="1-0-7" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-7">root2</div>--%>
<%--                    </td>--%>
<%--                </tr>--%>
<%--                <tr data-index="6" class="">--%>
<%--                    <td data-field="id" data-key="1-0-0" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-0">804</div>--%>
<%--                    </td>--%>
<%--                    <td data-field="card_id" data-key="1-0-1" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-1">1805011156</div>--%>
<%--                    </td>--%>
<%--                    <td data-field="book_id" data-key="1-0-2" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-2">207</div>--%>
<%--                    </td>--%>
<%--                    <td data-field="borrow_date" data-key="1-0-3" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-3">2023-05-21 10:35:34</div>--%>
<%--                    </td>--%>
<%--                    <td data-field="end_date" data-key="1-0-4" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-4">2023-07-10 10:36:38</div>--%>
<%--                    </td>--%>
<%--                    <td data-field="return_date" data-key="1-0-5" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-5">2023-05-21 10:36:57</div>--%>
<%--                    </td>--%>
<%--                    <td data-field="illegal" data-key="1-0-6" data-minwidth="280" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-6"></div>--%>
<%--                    </td>--%>
<%--                    <td data-field="manager_id" data-key="1-0-7" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-7">root</div>--%>
<%--                    </td>--%>
<%--                </tr>--%>
<%--                <tr data-index="7" class="">--%>
<%--                    <td data-field="id" data-key="1-0-0" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-0">831</div>--%>
<%--                    </td>--%>
<%--                    <td data-field="card_id" data-key="1-0-1" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-1">1805011322</div>--%>
<%--                    </td>--%>
<%--                    <td data-field="book_id" data-key="1-0-2" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-2">204</div>--%>
<%--                    </td>--%>
<%--                    <td data-field="borrow_date" data-key="1-0-3" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-3">2023-06-02 21:58:56</div>--%>
<%--                    </td>--%>
<%--                    <td data-field="end_date" data-key="1-0-4" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-4">2023-07-22 21:59:24</div>--%>
<%--                    </td>--%>
<%--                    <td data-field="return_date" data-key="1-0-5" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-5">2023-06-03 1:12:36</div>--%>
<%--                    </td>--%>
<%--                    <td data-field="illegal" data-key="1-0-6" data-minwidth="280" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-6"></div>--%>
<%--                    </td>--%>
<%--                    <td data-field="manager_id" data-key="1-0-7" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-7">root</div>--%>
<%--                    </td>--%>
<%--                </tr>--%>
<%--                <tr data-index="8" class="">--%>
<%--                    <td data-field="id" data-key="1-0-0" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-0">840</div>--%>
<%--                    </td>--%>
<%--                    <td data-field="card_id" data-key="1-0-1" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-1">1805011322</div>--%>
<%--                    </td>--%>
<%--                    <td data-field="book_id" data-key="1-0-2" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-2">204</div>--%>
<%--                    </td>--%>
<%--                    <td data-field="borrow_date" data-key="1-0-3" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-3">2023-06-03 10:18:57</div>--%>
<%--                    </td>--%>
<%--                    <td data-field="end_date" data-key="1-0-4" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-4">2023-07-06 10:19:09</div>--%>
<%--                    </td>--%>
<%--                    <td data-field="return_date" data-key="1-0-5" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-5"></div>--%>
<%--                    </td>--%>
<%--                    <td data-field="illegal" data-key="1-0-6" data-minwidth="280" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-6"></div>--%>
<%--                    </td>--%>
<%--                    <td data-field="manager_id" data-key="1-0-7" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-7"></div>--%>
<%--                    </td>--%>
<%--                </tr>--%>
<%--                <tr data-index="9" class="">--%>
<%--                    <td data-field="id" data-key="1-0-0" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-0">883</div>--%>
<%--                    </td>--%>
<%--                    <td data-field="card_id" data-key="1-0-1" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-1">1805011446</div>--%>
<%--                    </td>--%>
<%--                    <td data-field="book_id" data-key="1-0-2" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-2">996</div>--%>
<%--                    </td>--%>
<%--                    <td data-field="borrow_date" data-key="1-0-3" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-3">2023-06-04 12:20:20</div>--%>
<%--                    </td>--%>
<%--                    <td data-field="end_date" data-key="1-0-4" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-4">2023-07-24 12:20:25</div>--%>
<%--                    </td>--%>
<%--                    <td data-field="return_date" data-key="1-0-5" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-5">2023-06-04 12:20:30</div>--%>
<%--                    </td>--%>
<%--                    <td data-field="illegal" data-key="1-0-6" data-minwidth="280" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-6"></div>--%>
<%--                    </td>--%>
<%--                    <td data-field="manager_id" data-key="1-0-7" class="">--%>
<%--                        <div class="layui-table-cell laytable-cell-1-0-7">root</div>--%>
<%--                    </td>--%>
<%--                </tr>--%>
                </tbody>
            </table>
            </c:forEach>
        </div>
    </div>
    <div class="layui-table-page">
        <div id="layui-table-page1">
            <div class="layui-box layui-laypage layui-laypage-default" id="layui-laypage-1"><a href="javascript:;"
                                                                                               class="layui-laypage-prev layui-disabled"
                                                                                               data-page="0"><i
                    class="layui-icon"></i></a><span class="layui-laypage-curr"><em
                    class="layui-laypage-em"></em><em>1</em></span><a href="javascript:;" data-page="2">2</a><a
                    href="javascript:;" data-page="3">3</a><span class="layui-laypage-spr">…</span><a
                    href="javascript:;" class="layui-laypage-last" title="尾页" data-page="36">36</a><a
                    href="javascript:;" class="layui-laypage-next" data-page="2"><i class="layui-icon"></i></a><span
                    class="layui-laypage-skip">到第<input type="text" min="1" value="1" class="layui-input">页<button
                    type="button" class="layui-laypage-btn">确定</button></span><span class="layui-laypage-count">共 359 条</span><span
                    class="layui-laypage-limits"><select lay-ignore=""><option value="10" selected="">10 条/页</option><option
                    value="20">20 条/页</option><option value="30">30 条/页</option><option value="40">40 条/页</option><option
                    value="50">50 条/页</option><option value="60">60 条/页</option><option value="70">70 条/页</option><option
                    value="80">80 条/页</option><option value="90">90 条/页</option></select></span></div>
        </div>
    </div>
    <style>.laytable-cell-1-0-0 {
        width: 80px;
    }

    .laytable-cell-1-0-1 {
        width: 180px;
    }

    .laytable-cell-1-0-2 {
        width: 100px;
    }

    .laytable-cell-1-0-3 {
        width: 180px;
    }

    .laytable-cell-1-0-4 {
        width: 180px;
    }

    .laytable-cell-1-0-5 {
        width: 180px;
    }

    .laytable-cell-1-0-6 {
    }

    .laytable-cell-1-0-7 {
        width: 80px;
    }</style>
</div>

<!-- 头部工具栏 -->
<script type="text/html" id="headBar">
    条件搜索：
    <div class="layui-inline">
        <select id="condition" name="condition" lay-verify="required">
            <option value=""></option>
            <option value="other">超期未还</option>
            <option value="id">借书人ID</option>
            <option value="card_id">借阅证号</option>
            <option value="book_id">书籍ID</option>
            <option value="borrow_date">借阅日期</option>
            <option value="end_date">限制日期</option>
            <option value="return_date">返还日期</option>
            <option value="illegal">违章信息</option>
            <option value="manager_id">处理人</option>
        </select>
    </div>
    <div class="layui-inline">
        <input class="layui-input" id="conditionValue" name="conditionValue" id="demoReload" autocomplete="off">
    </div>
    <button class="layui-btn" name="condition" data-type="reload" lay-event="search">搜索</button>
</script>
<script>
    layui.use(['table', 'jquery'], function () {
        $ = layui.jquery;
        var table = layui.table;
        // 进行渲染
        var tableIns = table.render({
            elem: '#history'
            , url: './borrowList'
            , toolbar: '#headBar'
            , cols: [[
                {field: 'id', width: 80, title: 'ID', sort: true}
                , {field: 'card_id', width: 180, title: '借阅证号'}
                , {field: 'book_id', width: 100, title: '书籍ID', sort: true}
                , {field: 'borrow_date', width: 180, title: '借阅时间'}
                , {field: 'end_date', title: '限定时间', width: 180}
                , {field: 'return_date', width: 180, title: '归还时间', sort: true}
                , {field: 'illegal', minWidth: 280, title: '违章信息', sort: true}
                , {field: 'manager_id', width: 80, title: '处理人'}
            ]]
            , page: true
        });

        // 头部工具栏事件
        table.on('toolbar(formFilter)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                // 条件查找图书证
                case 'search':
                    var conditionValue = $('#conditionValue');
                    var condition = $('#condition');
                    // 进行搜索，重新渲染
                    tableIns.reload({
                        where: { //设定异步数据接口的额外参数，任意设
                            "condition": condition.val(),
                            "conditionValue": conditionValue.val()
                        }
                        , page: {
                            curr: 1 //重新从第 1 页开始
                        }
                    });
                    break;

            }
            ;
        });


    });
</script>

</body>
</html>